<script>
import * as echarts from 'echarts';
import resize from "@/components/Charts/mixins/resize";
import {homepageOverview} from "@/api/user";
import {getUserInfo} from "@/utils/auth";

function getdate() {
  function getBeforeDate(n) {
    var n = n;
    var d = new Date();
    var year = d.getFullYear();
    var mon = d.getMonth() + 1;
    var day = d.getDate();
    if (day <= n) {
      if (mon > 1) {
        mon = mon - 1;
      } else {
        year = year - 1;
        mon = 12;
      }
    }
    d.setDate(d.getDate() - n);
    year = d.getFullYear();
    mon = d.getMonth() + 1;
    day = d.getDate();
    return (mon < 10 ? ('0' + mon) : mon) + "月" + (day < 10 ? ('0' + day) : day) + '日';
  }

  return [getBeforeDate(0,), getBeforeDate(1,), getBeforeDate(2,), getBeforeDate(3,), getBeforeDate(4,), getBeforeDate(5), getBeforeDate(6,)]
}

export default {
  mixins: [resize],
  data() {
    return {
      statisticalList: [
        {
          title: '今日销售毛利',
          value: 111231,
          oldValue: '0',
        },
        {
          title: '今日销售额',
          value: 111231,
          oldValue: '0',
        },
        {
          title: '今日销售笔数',
          value: 111231,
          oldValue: 111231,
        },
        {
          title: '今日资金入账',
          value: 111231,
        }
      ],
      summaryDataList: [
        {
          title: '客户总数',
          value: '-',
        },
        {
          title: '供应商总数',
          value: '-',
        },
        {
          title: '库存总数',
          value: '-',
        },
        {
          title: '库存预警',
          value: '-',
        },
        {
          title: '职员总数',
          value: '-',
        }
      ],
      navList: [
        {
          iconClass: 'sale2',
          name: '销售',
          nav: '/sale_manager/product_sale',
        }, {
          iconClass: 'purchase-goods-nav',
          name: '进货',
          nav: '/stock_manager/purchase_incoming',
        }, {
          iconClass: 'inventory2',
          name: '库存',
          nav: '/inventory_management/product_inventory',
        }, {
          iconClass: 'custom-nav',
          name: '客户',
          nav: '/basic_settings/customer_settings',
        },
      ],
    }
  },
  mounted() {
    this.requireApi();
    this.$nextTick(() => {
      this.echartsRender();
    });
  },
  methods: {
    requireApi() {
      homepageOverview({
        userID: getUserInfo().userID,
      }).then(res => {
        console.log(res);
        this.summaryDataList[4].value = res.data.data.employee;
        this.summaryDataList[3].value = res.data.data.inventoryAlert;
        this.summaryDataList[2].value = res.data.data.inventory;
        this.summaryDataList[1].value = res.data.data.supplier;
        this.summaryDataList[0].value = res.data.data.customer;
      });
    },
    formatNumberWithTwoDecimals(inputString) {
      let number = parseFloat(inputString);

      if (!isNaN(number)) {
        return number.toFixed(2);
      }
    },
    clickEvent() {
      this.$router.push({path: '/home/beginnerGuide'});
    },
    clickEvent2(v) {
      this.$router.push({ path: v.nav })
    },
    echartsRender() {
      let chartDom = document.getElementById('echartsId');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        legend: {
          type: 'plain',
          orient: 'horizontal',
          bottom: '1',
          data: [{
            name: '销售单',
            icon: 'rect',
          }, {
            name: '进货单',
            icon: 'rect',
            lineStyle: {
              color: '#F9A005'
            }
          }, {
            name: '零售单',
            icon: 'rect',
            lineStyle: {
              color: '#34C0A4'
            }
          },]
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {},
          formatter: function (list) {
            var msg = '';
            try {
              for (let i = 0; i < list.length; i++) {
                msg += list[i].marker;
                msg += list[i].seriesName;
                msg += ": ";
                msg += (list[i].data);
                msg += "<span style='margin-right: 6px;'></span>";
                msg += '<br/>';
              }
            } catch (e) {
              console.log(e)
            }

            return msg;
          },
        },
        xAxis: {
          type: 'category',
          data: getdate().reverse(),
        },
        title: {
          text: '数据概览'
        },
        yAxis: {
          type: 'value'
        },

        grid: {
          y: 50,
          x: 40,
          x2: 20,
          y2: 58
        },
        series: [
          {
            color: "#0179FF",
            name: '销售单',
            type: 'line',
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: 'rgba(1,121,255,0.1)'
                    },
                      {
                        offset: 1,
                        color: 'rgba(1,121,255,0.1)'
                      }
                    ],
                    false
                )
              }
            },
            data: [4, 2, 4, 5, 8, 1, 3]
          },
          {
            color: "#F9A005",
            name: '进货单',
            type: 'line',
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: 'rgba(249,160,5,0.1)'
                    },
                      {
                        offset: 1,
                        color: 'rgba(249,160,5,0.1)'
                      }
                    ],
                    false
                )
              }
            },
            data: [2, 4, 6, 5, 1, 5, 10]
          },
          {
            color: "#34C0A4",
            name: '零售单',
            type: 'line',
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: 'rgba(52,192,164,0.1)'
                    },
                      {
                        offset: 1,
                        color: 'rgba(52,192,164,0.1)'
                      }
                    ],
                    false
                )
              }
            },
            data: [4, 6, 1, 2, 2, 6, 3]
          },
        ]
      };

      option && myChart.setOption(option);
    },
  }
}
</script>

<template>
  <div class="homepage disabled-warp"
       style="height: calc(100vh - 96px); overflow-y: auto; padding: 20px 20px 0 20px; display: flex;">
    <div
        style="  height: 116px; width: calc(100% - 200px); display: flex; flex-wrap: wrap; ">
      <div style="flex: 1;" class="dashboard-container-wrap" v-for="(item, index) in statisticalList">
        <div class="dashboard-container-wrap-inner" style="position: relative;">
          <el-statistic
              group-separator=","
              :precision="2"
              :value="item.value"
              :title="item.title">
          </el-statistic>
          <div
              style="position: absolute; bottom: 40px; left: 12px; font-size: 12px; color: rgb(131, 131, 131); line-height: 14px;">
            <span v-if="item.oldValue">昨日：</span>{{ formatNumberWithTwoDecimals(item.oldValue) }}
          </div>
        </div>
      </div>

      <div style="width: calc(100% - 12px); margin-top: 12px; height: 180px; display: flex;"
           class="dashboard-container-wrap">
        <div class="dashboard-container-wrap-inner"
             style="height: 100%; width: 100%; padding: 10px 12px;  flex: 0 0 calc(50% - 4px); display: flex; flex-wrap: wrap; ">
          <div style="height: 25px; width: 100%; display: flex; align-items: center;">汇总信息</div>
          <div style="height: calc(100% - 25px); width: 100%;  display: flex; flex-wrap: wrap;">
            <div style="flex: 0 0 calc(33.33% - 10px); position: relative; " v-for="(item, index) in summaryDataList"
                 :key="index" class="homepage-client-number-wrapper">
              <div style="font-size: 12px; font-weight: 500; " class="homepage-client-number-info">{{ item.title }}
              </div>
              <div style="font-size: 20px; font-weight: 700;" class="homepage-client-number">{{ item.value }}</div>
            </div>
          </div>
        </div>
        <div class="dashboard-container-wrap-inner" style="height: 100%; width: 100%; margin-right: 0;
          justify-content: space-between; align-items: stretch; background: none !important; flex: 0 0 calc(50% - 6px); display: flex; flex-wrap: wrap; ">
          <div class="homepage-quick-navigation" v-for="(item, index) in navList"
               :style="`margin-bottom: 10px; position: relative;  `" @click="clickEvent2(item)">
            <div class="homepage-quick-navigation-inner"
                 style="position: absolute; margin-left: 0; left: 22px; display: flex;">
              <svg-icon :icon-class="item.iconClass" style="font-size: 44px;"/>
              <span style="display: flex; margin-left: 8px; align-items: center;">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>

      <div style="width: calc(100% - 12px); margin-top: 12px; height: 300px; " class="dashboard-container-wrap">
        <div class="dashboard-container-wrap-inner" style="height: 100%; width: 100%; padding: 10px 12px;"
             id="echartsId"></div>
      </div>
    </div>

    <div style="width: 200px; border-radius: 8px; flex: 1; " class="dashboard-container-right">
      <el-card class="box-card2" shadow="never">
        <div slot="header" class="clearfix">
          <span style="font-weight: 900;">新手向导</span>
        </div>
        <div class="text item" style="font-size: 14px;">
          <div>
            三分钟快速玩转云梦进销存通用2024版
          </div>
          <el-button type="primary" @click="clickEvent" style="position: relative; top: 10px;">立即开始</el-button>
        </div>
      </el-card>

      <el-card class="box-card" style="margin-top: 10px;" shadow="never">
        <div slot="header" class="clearfix">
          <span style="font-weight: 900;">系统公告</span>
        </div>
        <div class="text item" style="font-size: 14px;">
          可在系统设置里设置公告信息
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.dashboard {
  &-container {
    border-radius: 10px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container-wrap {
  line-height: 16px;
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #2F3745;
}

.dashboard-container-wrap-inner {
  margin-right: 10px;
  background: #fff;
  border-radius: 8px;
  height: 100%;
}

.homepage-quick-navigation {
  border-radius: 8px;
  flex: 0 0 calc(50% - 5px);
  height: 85px;
  background: #fff;
  display: flex;
  cursor: pointer;
  align-items: center;
}

.homepage-quick-navigation-inner {
  border-radius: 8px;
}

.homepage-quick-navigation:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dashboard-inner {
  font-size: 16px;
  font-weight: 700;
  padding: 0 0 10px 0;
  color: #2f3745;
}

.homepage-client-number-wrapper {
  background: rgb(246, 247, 251);
  border-radius: 8px;
  margin: 8px 5px 0 0;
  padding: 8px;
  cursor: pointer;
}

.box-card {
  border-radius: 8px;
  height: 240px;
}

.box-card2 {
  border-radius: 8px;
  height: 160px;
}
</style>

<style>
.box-card .el-card__header {
  padding: 9px 10px !important;
}


.box-card .el-card__body {
  padding: 14px 10px;
  font-size: 16px;
  line-height: 26px;
}

.box-card2 .el-card__header {
  padding: 9px 10px !important;
}


.box-card2 .el-card__body {
  padding: 14px 10px;
  font-size: 16px;
  line-height: 26px;
}


.homepage-client-number-info {
  font-size: 14px;
  font-weight: 500;
  color: rgb(47, 55, 69);
  line-height: 20px;
}

.homepage-client-number {
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  margin-top: 5px;
  color: rgb(19, 163, 124);
}


.dashboard-container-wrap-inner .el-statistic .head {
  display: inline-block;
  line-height: 20px;
  font-size: 20px;
  position: absolute;
  left: 12px;
  color: rgb(44, 44, 44);
  font-weight: 500;
  top: 16px;
}

.dashboard-container-wrap-inner .el-statistic {
  height: 100%;
}

.dashboard-container-wrap-inner .el-statistic .con .number {
  padding: 0 !important;
  font-family: Helvetica Neue, Arial;
}

.dashboard-container-wrap-inner .el-statistic .con {
  position: absolute;
  bottom: 16px;
  left: 12px;
  font-size: 18px;
  color: rgb(44, 44, 44);
}
</style>
